/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    InteractionManager,
    Alert
} from 'react-native';
import GCStyle from '../../Model/Global/GCStyle';
import AboutUs from './Account/AboutUs';
import SelfInfo from './Account/SelfInfo';
import Login from './Account/Login';
import {connect} from 'react-redux';
import {UserLogout} from '../../Action/UserAction';
import Global from '../../Model/Global/GCPublic';
class AboutMe extends Component {

    componentWillUpdate(nextProps, nextState) {
        InteractionManager.runAfterInteractions(() => {
            const {UserReducer, dispatch} = this.props;
            if (UserReducer.isLoggedOut) {
                this.props.navigator.resetTo({
                    id: 'Login',
                    component: Login,
                    params: {},
                });
            }
        });
    }

    onOut() {
        Alert.alert(
            '注销账号提示！',
            '确定要注销当前账号吗？',
            [
                {
                    text: '取消', onPress: () => {
                }
                },
                {
                    text: '确定', onPress: () => {
                    const {dispatch} = this.props;
                    dispatch(UserLogout());
                }
                },
            ]
        );
    }

    render() {
        const {UserReducer} = this.props;
        return (
            <View style={styles.container}>
                <View style={GCStyle.Style.navigatorView}>
                    <Text style={GCStyle.Style.titleTxt}>微巴士</Text>
                </View>
                <View style={[GCStyle.GCOrderCell.cellLine,{ width: GCStyle.GCPubWidth,height:75}]}>
                    <Text style={styles.welcome}>
                        {Global.User.name}
                    </Text>
                </View>

                <TouchableOpacity
                    activeOpacity={0.8}
                    style={[GCStyle.GCOrderCell.cellLine,{marginTop:10, paddingLeft:10,paddingRight:10, width: GCStyle.GCPubWidth}]} onPress={() => this.onClickLine(SelfInfo)}
                >
                    <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                        <Image resizeMode='contain' source={require('../../Resource/Imgs/account_icon_personal.png')}style={{width:16,height:14,marginRight:6}}/>
                        <Text style={{fontSize:14,color:'#000000'}}>认证资料 </Text>
                    </View>
                    <Image resizeMode='contain' source={require('../../Resource/Imgs/app_icon_more.png')}style={{width:10,height:13}}/>
                    <View style={[GCStyle.GCOrderCell.lineStyle, {marginTop: 47,marginLeft:8}]}/>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={[GCStyle.GCOrderCell.cellLine,{paddingLeft:10,paddingRight:10, width: GCStyle.GCPubWidth}]}onPress={() => this.onClickLine(AboutUs)}
                >
                    <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                        <Image resizeMode='contain' source={require('../../Resource/Imgs/account_icon_about.png')}style={{width:16,height:16,marginRight:6}}/>
                        <Text style={{fontSize:14,color:'#000000'}}>关于我们</Text>
                    </View>
                    <Image resizeMode='contain' source={require('../../Resource/Imgs/app_icon_more.png')}style={{width:10,height:13}}/>
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={{paddingTop:100}}
                    onPress={() => this.onOut()}
                >
                    <View style={{justifyContent:'center',alignItems:'center', borderRadius:3, width:GCStyle.GCPubWidth - 30, height:40, backgroundColor:'#22cb86', alignSelf:'center'}}>
                        <Text style={{fontSize:14,color:'#ffffff'}}>登出</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    onClickLine(comType){
        const {navigator} = this.props;
        if (navigator) {
            navigator.push({
                component: comType,
            });
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F4F4F4',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        color:'black'
    },
});

export default connect((state) => {
    return {UserReducer} = state;
})(AboutMe);